<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="../build/react.development.js"></script>
    <script src="../build/react-dom.development.js"></script>
    <script src="../build/babel.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <!-- https://reactjs.org/docs/refs-and-the-dom.html#callback-refs -->
    <script type="text/babel">

      class ThatComponent extends React.Component{
        // 构造初始化函数
        constructor(props){
            super(props);
            //引用（Refs）提供了一个获得DOM节点或者创建在render方法中的React元素的方法；
            // 引用不可乱用
            this.state={name:"9527",value:"good"};
            this.textInput1 = React.createRef();
            this.focusTextInput = this.focusTextInput.bind(this);
            this.handleChange = this.handleChange.bind(this);
            // 右边的是 组件类内部的方法名
            // 左边的是 暴露给标签,外部调用的方法名
            this.msup = this.tick.bind(this);
            this.iNuma=0;
0        }
        // 使用setState方法设置对象值
        tick(ev,iNum=2) {
          this.setState({
            name: "97",
            value:"Yes"
          });
          //if(iNum===null||iNum==undefined||iNum==NaN) iNum = 1
          this.iNuma=(this.iNuma+iNum)
          console.log('iNuma',this.iNuma)
          console.log('iNum',iNum)
        }

        tack() {
          this.setState({
            name: "98",
            value:"GoGoGo"
          });
        }

        handleChange(event) {
          this.setState({name: event.target.value,value:event.target.value});
        }

        //完成加载
        componentDidMount(ev) {
          console.log("didMount");
          this.timerID = setInterval(
            () => this.tick(ev,1),
            1000
          );
        }

        // 即将加载
         componentWillMount() {
          console.log("willMount");
          // setTimeout(() => {
          //   clearInterval(this.timerID);
          // }, 1000);
          
        }

        // 组件发生更新
        componentDidUpdate() {    
          console.log('DidUpdate');
        
    }   

        // 按钮方法调用函数
        focusTextInput=(ev)=>{
          // 很明显的，让text input获得焦点使用了原生的DOM API
          // 注意：我们通过current去获得DOM节点
          this.tack();

          this.textInput1.current.focus();
          clearInterval(this.timerID);
        }

        //  这里把鼠标按下,抬起分别做2个函数处理
        //  readOnly可加塞逻辑做判断
        //  onChange如果不加就无法对value进行修改
        render (){
          return (
            <div>
        <input
          type="text"
          ref={this.textInput1}
          value={this.state.value}
          defaultValue={this.state.value}
          readOnly={this.state.value.trim()==="huluwa"}
          onChange={this.handleChange} 
           />
           <h4>{this.state.value}</h4>
        <input
          type="button"
          value="Button"
          onMouseDown={this.focusTextInput}
          onMouseUp={e=>this.msup(e,3)}
        /></div>

          )
        }
      }

      class MyComponent extends React.Component {
        constructor(props) {
          super(props);
          this.myTextInput = React.createRef();
          this.handleClick = this.handleClick.bind(this)
        }
        // 对 myTextInput这个引用做一个focus操作
        handleClick() {
          this.myTextInput.current.focus();
        }
        // Button执行函数handleClick
        render() {
          return (
            <div>
              <input type="text" ref={this.myTextInput} />
              
              <input type="button" value="Focus the text input" onClick={this.handleClick} />
            </div>
          );
        }
      }

      ReactDOM.render(
        <div>
        <ThatComponent/>
        <MyComponent />
        </div>
        ,
        document.getElementById('example')
      );
    </script>
  </body>
</html>
